<template>
	<div>
		<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
			
			
			<van-row>
			  <van-col span="1"></van-col>
			  <van-col span="22">
				  <van-row type="flex" justify="space-between">
					  <van-col span="4">
						  
						  <van-sidebar :active-key="activeKey" @change="onChange" >
						  	<van-sidebar-item title="热点" class="title" />
						  	<van-sidebar-item title="热点" />
						  	<van-sidebar-item title="热点" />
						  	<van-sidebar-item title="热点" />
						  	<van-sidebar-item title="热点" />
						  	<van-sidebar-item title="热点" />
						  	<van-sidebar-item title="热点" />
						  	<van-sidebar-item title="热点" />
						  </van-sidebar>
						  
					  </van-col>
					 
					  <van-col span="19" >
						
						 <van-tag round type="danger" size="large" plain text-color='#101010' v-for='item in list' :key="index" class="van-tag" v-show='cen'>{{item.yangsheng}}</van-tag>
						<div class='ton'>
							<van-button type="default" size="large">快速侧体质</van-button>
						</div> 
					  </van-col>
					</van-row>
				  
			  </van-col>
			  <van-col span="1"></van-col>
			</van-row>
			
			
			
			
			
			
			
			
		</van-pull-refresh>
	</div>
</template>

<script>
	import axios from "axios"
	import Mock from 'mockjs'
	export default {
		name: 'Caipu',
		data() {
			return {
				activeKey: 0,
				valu: '养生之道',
				list: [],
				isLoading: false,
				cen:true,
				sen:false,
				index:'',
				
				
			};
		},
		mounted() {
			let that = this
			this.$emit('parend', this.valu),
				axios({
					url: 'http://www.baidu.com',
				}).then((res) => {
					// console.log(res.data.data)
					that.list = res.data.data
				})
		
		},
		methods: {
			onChange(key) {
				console.log(key)
				this.activeKey = key;
			},
			

			onRefresh() {
			
      setTimeout(() => {
        this.$toast('刷新成功');
        this.isLoading = false;
		
		var Random=Mock.Random
		
		Random.extend({
			yangsheng:function(data){
				var constellation=['蜜汁山药','牛尾汤','怀山炖排骨','鲜芒辣味虾','香菇白菜瘦肉汤']
				return this.pick(constellation)
			}
		})
		
		
		var username=Mock.mock({
			'data|8-10':[{
				yangsheng:'@yangsheng'
			}]
		})
		Mock.mock('http://www.baidu.com',username)
		
		let that=this
		axios({
			url: 'http://www.baidu.com',
		}).then((res) => {
			// console.log(res.data.data)
			that.list = res.data.data
		})
		
        
      }, 500);
   
			}

		},
		
	}
</script>

<style>
	

	.van-tag {
		margin: 30px 0px 0px 20px;
		height: 20px;
		width:100px;
		display: inline-block;
		text-align: center
	}

	.ton {
		margin-left: 90px;
		margin-top: 20px
	}
	
</style>
